<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html>  
<html>  
<head>  
    <title>餐厅前台管理系统</title>  
    <style>  
        /* 简单的样式 */  
        
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .navbar {
            background-color: #d2a679;
            overflow: hidden;
            border-bottom: 2px solid #ccc;
        }

        .navbar a {
            float: left;
            display: block;
            color: #000;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 17px;
        }

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        .navbar a.active {
            background-color: #ff704d;
            color: white;
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        table {  
            border-collapse: collapse;  
            width: 100%;  
        }  
        th, td {  
            text-align: left;  
            padding: 8px;  
        }  
        tr:nth-child(even) {background-color: #f2f2f2;}  
    </style>  
</head>  
<body>  
  
<h1>餐厅前台管理系统</h1>  

<div class="navbar">
        <a href="Order Status.jsp" class="active">点餐状态</a>
        <a href="BOH.jsp">后厨状态</a>
        <a href="order.jsp">今日订单</a>
        <a href="Menu Management.jsp">菜品管理</a>
        <a href="Sales Statistics.jsp">营业统计</a>
        <a href="aboutme.jsp">我的</a>
    </div>
  
<!-- 查看点餐情况 -->  

<div class="container">
        <h1>点餐状态</h1>
        <!-- 在这里添加点餐状态的内容 -->
        <table>  
    <thead>  
        <tr>  
            <th>订单号</th>  
            <th>顾客姓名</th>  
            <th>下单时间</th>  
            <th>状态</th>  
        </tr>  
    </thead>  
    <tbody>  
        <%-- 这里应该使用JSP标签（如c:forEach）从后端获取点餐列表并显示 --%>  
        <%-- 示例数据 --%>  
        <tr>  
            <td>1001</td>  
            <td>张三</td>  
            <td>2023-10-23 12:00:00</td>  
            <td>待制作</td>  
        </tr>  
        <tr>  
            <td>1002</td>  
            <td>李四</td>  
            <td>2023-10-23 13:00:00</td>  
            <td>已制作</td>  
        </tr>  
    </tbody>  
</table> 
    </div>


  
<!-- 查看结算情况 -->  
<h2>结算情况</h2>  
<table>  
    <thead>  
        <tr>  
            <th>订单号</th>  
            <th>支付时间</th>  
            <th>支付方式</th>  
            <th>金额</th>  
        </tr>  
    </thead>  
    <tbody>  
        <%-- 这里应该使用JSP标签从后端获取结算列表并显示 --%>  
        <%-- 示例数据 --%>  
        <tr>  
            <td>1001</td>  
            <td>2023-10-23 12:10:00</td>  
            <td>微信支付</td>  
            <td>120元</td>  
        </tr>  
    </tbody>  
</table>  
  
<!-- 查看菜品制作状态 -->  
<h2>菜品制作状态</h2>  
<table>  
    <thead>  
        <tr>  
            <th>菜品名称</th>  
            <th>制作状态</th>  
            <th>预计完成时间</th>  
        </tr>  
    </thead>  
    <tbody>  
        <%-- 这里应该使用JSP标签从后端获取菜品制作状态列表并显示 --%>  
        <%-- 示例数据 --%>  
        <tr>  
            <td>宫保鸡丁</td>  
            <td>制作中</td>  
            <td>2023-10-23 12:15:00</td>  
        </tr>  
        <tr>  
            <td>鱼香肉丝</td>  
            <td>已完成</td>  
            <td>2023-10-23 12:10:00</td>  
        </tr>  
    </tbody>  
</table>  
  
<!-- 统计营业额 -->  
<h2>营业额统计</h2>  
<p>今日营业额: <strong>￥1,500</strong></p>  
<p>本周营业额: <strong>￥10,000</strong></p>  
<p>本月营业额: <strong>￥30,000</strong></p>  
<%-- 这里应该使用JSP标签从后端获取统计数据并显示 --%>  
  
</body>  
</html>